<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表循环</title>
    <style>
        .div1 {
            color: #f00
        }

        .div2 {
            border: 1px solid #f00;
        }
    </style>
</head>

<body>
    <!-- 创建dmo根节点，一个页面中需要有一个根节点，这个节点下的内容会被react管理 -->
    <div id="app"></div>
</body>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
<!-- 使用react语法（jsx），记得type="text/babel" -->
<script type="text/babel">
    /* 
       {}使用表达式
    */
    let arr = [
        <li>1</li>,
        <li>2</li>,
        <li>3</li>,
        <li>4</li>,
        <li>5</li>,
        <li>6</li>,
    ];
    let flag = false;

    let arr2 = [
        1,2,3,4,5,6
    ]

    function doArr() {
        const result = [];
        for (const v of arr2) {
            result.push(<li>新闻{v}</li>);
        }
        return result;
    }


    let myDom =
        (<div>
            <ul>
                {arr}
            </ul>
            <ul>
                {doArr()}
            </ul>
            <ul>
                {arr2.map(v => <li>新闻{v}</li>)}
            </ul>
            <ul>
                {arr2.filter(v => v % 2 == 0).map(v => <li>列表{v}</li>)}
            </ul>
        </div>);

    // React17以前
    // ReactDOM.render(myDom, document.getElementById("app"));

    // React17以后创建根节点
    let root = ReactDOM.createRoot(document.getElementById("app"));

    // 渲染jsx对象
    root.render(myDom);
</script>

</html>